<template>
  <div style="background-color: #f8f8f8;" >
    <div style="height:20px;padding: 5px;background-color: #fff;box-shadow:0 0 10px 0 rgba(128,145,165,0.2)">
      <div style="float: left;margin-left: 3px;height: 20px;" >
        局号: {{gameNumber}}
      </div>
    </div>
    <div style="padding: 5px;padding-bottom: 0px;" >
      <table style='width: 100%;' border='0' v-on:click="chanageResultClass()"  >
        <tr v-for='i in hang' :key="i">
          <td v-for=' n in lie ' :key="n" width="5%"  >
            <div :class="getGameResultClass(n*hang-(hang-i))" >{{getGameResult(n*hang-(hang-i))}}</div>
          </td>
        </tr>
      </table>
    </div>
    <div class="weui-flex">
      <div class="weui-flex__item"><div class="tishi">{{tiShiText}} <span class="daojishi">{{xiaZhuTishiSecond==-1||xiaZhuTishiSecond==0 ? '' : xiaZhuTishiSecond}}</span></div></div>
    </div>
    <div class="weui-flex" style="margin-top: 5px;" v-show="isXieZhuTishi">
      <div class="weui-flex__item">
        <div class="xiaZhuTishi">
          <p v-show="xieZhuTishi.da > 0">大：{{xieZhuTishi.da}}</p>
          <p v-show="xieZhuTishi.xiao > 0">小：{{xieZhuTishi.xiao}}</p>
          <p v-show="xieZhuTishi.dan > 0">单：{{xieZhuTishi.dan}}</p>
          <p v-show="xieZhuTishi.shuang > 0">双：{{xieZhuTishi.shuang}}</p>
          <p v-show="xieZhuTishi.x234 > 0">234：{{xieZhuTishi.x234}}</p>
          <p v-show="xieZhuTishi.x134 > 0">134：{{xieZhuTishi.x134}}</p>
          <p v-show="xieZhuTishi.x124 > 0">124：{{xieZhuTishi.x124}}</p>
          <p v-show="xieZhuTishi.x123 > 0">123：{{xieZhuTishi.x123}}</p>
        </div>
      </div>
    </div>
    <div style="padding: 10px;" v-show="gameStatus==0" >
      <a href="javascript:;" v-on:click="startGame()" class="weui-btn weui-btn_primary">启动游戏</a>
    </div>
    <div class="weui-flex">
      <div class="weui-flex__item"><div class="placeholder" v-on:click="setGameResult(1,false)">1</div></div>
      <div class="weui-flex__item"><div class="placeholder" v-on:click="setGameResult(2,false)">2</div></div>
      <div class="weui-flex__item"><div class="placeholder" v-on:click="setGameResult(3,false)">3</div></div>
      <div class="weui-flex__item"><div class="placeholder" v-on:click="setGameResult(4,false)">4</div></div>
    </div>
    <div class="weui-flex">
      <div class="weui-flex__item"><div class="placeholder" v-on:click="setGameResult(1,true)" >1(暂停)</div></div>
      <div class="weui-flex__item"><div class="placeholder" v-on:click="setGameResult(2,true)" >2(暂停)</div></div>
      <div class="weui-flex__item"><div class="placeholder" v-on:click="setGameResult(3,true)" >3(暂停)</div></div>
      <div class="weui-flex__item"><div class="placeholder" v-on:click="setGameResult(4,true)" >4(暂停)</div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZhuanPan',
  data () {
    return {
      lie: 15,
      hang: 6,
      gameResults: [],
      resultsView: '',
      danCount: 0,
      shuangCount: 0,
      daCount: 0,
      xiaoCount: 0,
      gameStatus: 1,
      gameNumber: 0,
      tiShiText: '',
      result: 0,
      xiaZhuTishiSecond:0,
      xieZhuTishi:'',
      isXieZhuTishi:false
    }
  },
  created () {
      document.title = "幸运大转盘（后台）";
      this.pageInit()
  },
  methods: {
      pageInit: function(){
          this.getGameResults()
          this.$http.post('zhuanPan/getNewGameNumber', {}).then(function (response) {
              var data = response.data.data
              this.gameAvailable()
              this.gameStatus = data.gameStatus
              if (!data.gameStatus){
                  this.gameDisabled()
              }else {
                  this.gameNumber = data.gameNumber
                  this.xiaZhuTishiSecond = data.xiaZhuTishiSecond
                  this.getXiaZhuTishiDaoJiShi()
              }
          })
          this.resultsView = '大小'
      },
    getGameResults: function (index) {
        this.$http.post('zhuanPan/getNewSceneGameResults', {}).then(function (response) {
            this.gameResults = response.data.data.sceneGameResults
            for (var i = 0; i < this.gameResults.length; i++) {
                var result = parseInt(this.gameResults[i].result)
                this.countJiSuan(result);
            }
        })
    },countJiSuan: function(result){
          if (result === 1 || result === 3) {
              this.danCount++
          } else {
              this.shuangCount++
          }
          if (result === 1 || result === 2) {
              this.xiaoCount++
          } else {
              this.daCount++
          }
      },
      chanageResultClass: function(){
          if(this.resultsView == '大小'){
              this.resultsView = '单双'
          }else if(this.resultsView == '单双'){
              this.resultsView = '大小'
              //this.resultsView = '中边'
          }else if(this.resultsView == '中边'){
              this.resultsView = '大小'
          }
      },getGameResultClass: function (index) {
          index = index - 1
          if (index < this.gameResults.length) {
              var result = parseInt(this.gameResults[index].result)
              if(this.resultsView=='大小'){
                  if(result==1||result==2){
                      return 'lan'
                  }else{
                      return 'hong'
                  }
              }else if(this.resultsView=='单双'){
                  if(result==2||result==4){
                      return 'lan'
                  }else{
                      return 'hong'
                  }
              }else if(this.resultsView=='中边'){
                  if(result==2||result==3){
                      return 'lan'
                  }else{
                      return 'hong'
                  }
              }
          } else {
              return ''
          }
      },
    getGameResult: function (index) {
      index = index - 1
      if (index < this.gameResults.length) {
        var result = parseInt(this.gameResults[index].result)
        return result
      } else {
        return ''
      }
    },
    gameDisabled: function() {
        this.tiShiText = '游戏维护中...'
    },
      gameAvailable: function() {
          this.tiShiText = '游戏进行中'
      },
      setGameResult: function(result,isStop) {
          if(this.xiaZhuTishiSecond<=0) {
              this.gameResults.push({result: result})
              this.$http.post('zhuanPan/setResult?gameNumber=' + this.gameNumber + "&result=" + result + "&isStop=" + isStop, {}).then(function (response) {
                  var data = response.data.data
                  this.isXieZhuTishi = false
                  if (isStop) {
                      this.gameStatus = 0
                      this.gameDisabled()
                  } else {
                      this.gameNumber = data.gameNumber
                      this.xiaZhuTishiSecond = data.xiaZhuTishiSecond
                      this.getXiaZhuTishiDaoJiShi()
                      if (this.gameResults.length == 90) {
                          this.getGameResults()
                      }
                  }
              })
          }else{
            this.showTips("未到开奖时间",1000)
          }
      },
      startGame: function() {
          this.$http.post('zhuanPan/startGame', {}).then(function (response) {
              var data = response.data.data
              this.gameNumber = data.gameNumber
              this.gameStatus = 1
              this.xiaZhuTishiSecond = data.xiaZhuTishiSecond
              this.gameAvailable()
              this.getXiaZhuTishiDaoJiShi()
          })
      },
      getXiaZhuTishiDaoJiShi: function () {
          var that = this
          if (this.xiaZhuTishiSecond > 0) {
              this.tiShiText = '等待获取下注提示'
              setTimeout(function () {
                  that.getXiaZhuTishiDaoJiShi()
              }, 1000)
          }
          if (this.xiaZhuTishiSecond === 0){
              this.tiShiText = '获取下注提示中...'
              this.getAllGameXiaZhuTishi()
          }
          this.xiaZhuTishiSecond--
      },
      getAllGameXiaZhuTishi: function(){
          this.tiShiText = '请设置开奖结果'
          this.$http.post('zhuanPan/getXiaZhuTishi?gameNumber='+this.gameNumber, {}).then(function (response) {
              var data = response.data.data
              this.isXieZhuTishi = data.isXieZhuTishi
              this.xieZhuTishi = data.xieZhuTishi
          })
      },
    showTips: function (content,millisecond) {
        window.parent.document.getElementById('tips').style.display='';
        window.parent.document.getElementById('tipsContent').innerHTML=content;
        setTimeout(function () {
            window.parent.document.getElementById('tips').style.display='none';
        }, millisecond);
    },
      showTipsNoClose: function (content) {
          window.parent.document.getElementById('tips').style.display='';
          window.parent.document.getElementById('tipsContent').innerHTML=content;
      }
  }
}
</script>
<style>
  table,table tr th, table tr td { border:1px solid #ebebeb;height: 22px; padding-left: 1px;padding-right: 1px;}
  table,table tr th, table tr td div { height: 19px;border-radius: 25px; font-size: 12px;line-height: 19px;font-weight: bold;color: white;}
  table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
  .dan {
    background: red;
  }
  .shuang{
    background: dodgerblue;
  }
  .hong {
    background: red;
  }
  .lan{
    background: dodgerblue;
  }
  .tishi{
    padding: 0 12px;
    background-color: #ebebeb;
    height: 2.3em;
    line-height: 2.3em;
    text-align: center;
    color: sandybrown;
    font-weight: bold;
  }
  .xiaZhuTishi{
    padding: 5px;
    background-color: #ebebeb;
    color: red;
    text-align: center;
    font-weight: bold;
  }
  .daojishi{
    color: red;
  }
  .placeholder {
    margin: 5px;
    padding: 0 10px;
    background-color: #ebebeb;
    height: 4.3em;
    line-height: 4.3em;
    text-align: center;
  }
</style>
